<template>
  <div class="search">
    <div class="search-header">
      <span>课程名称：</span> <el-input v-model="search.course_name" placeholder="请输入课程名称" />
      <span>试卷标题：</span><el-input v-model="search.paper_name" placeholder="请输入试卷标题" />
      <div class="search-botomm">
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button @click="resetSearchInfo">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    search: {
      type: Object,
      required: true,
    }
  },
  methods: {
    searchClick() {
      this.$emit("searchClick");
    },
    changeUser(value) {
      this.$emit("changeUser", value);
    },
    changePass(value) {
      this.$emit("changePass", value);
    },
    resetSearchInfo() {
      this.$emit("resetSearchInfo");
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  flex-direction: column;

  &-header {
    display: flex;
    align-items: center;

    .el-input {
      flex: 0 0 calc(25% - 100px);
      margin-left: 20px;
    }
    span{
        margin-left: 20px;
    }
  }

  &-botomm {
    margin-left: 20px;

    .el-select {
      flex: 0 0 calc(25% - 100px);
      margin-left: 20px;
    }
    span{
        margin-left: 20px;
    }
    .search-btn {
      .el-button {
        margin-left: 20px;
      }
    }
  }
}
.search-header .el-select,
.search-header .el-input {
  min-width: 160px;
  max-width: 220px;
}

.search-botomm .el-select,
.search-botomm .el-input {
  min-width: 160px;
  max-width: 220px;
}
</style>
